<template>
    <a-modal
    :title='modalProps.title'
    :visible="visible"
    @ok="handleOk"
    :confirmLoading="confirmLoading"
    @cancel="handleCancel"
    >
      <a-form  :form='form'>
        <a-form-item label='问题描述' :label-col='{ span : 4}'  :wrapper-col="{ span : 18 }" >
            <a-textarea  v-decorator="['question',baseInit.question]"  rows='5'/> 
        </a-form-item>
         
        <a-form-item  style='display: none;' >
            <a-input    v-decorator="['code' , baseInit.code]"/>
        </a-form-item>
      </a-form>
    </a-modal>
</template>

<script>
  import  {  submitAddQA  }  from  '@/api/product/index'
export default {
  name: 'productQAModal',
  props:{
      visible:{
        type:Boolean,
        default:false
      }, 
  },
  data () {
    return {
      modalProps:{
          title:'',
          isEdit:false, /*表单进入状态*/
      }, 
      /*form 初始值*/
      baseInit:{
        code:{initialValue:''},/*隐藏input里加上code*/
        question:{ initialValue :'' , rules : [{ required : true , message : '请输入问题描述' }]},
         
      },
      /*等待动作*/
      confirmLoading: false,                                                             
    }
  },
  methods:{
     handleCancel(e) {
      this.$emit('handleCancel') 
    },
    //提交客户约谈添加信息
    handleOk(e) {
      let that = this,url
        this.form.validateFields((err, values) => {
          if (!err) {
            // console.log('Received values of form: ', values); 
            this.confirmLoading = true; 
            if(that.modalProps.isEdit == false){
                url ='/op/faq_template/create_faq_template' //新增 帮助信息模板
            }
            else{
                url = '/op/faq_template/modify_faq_template' //修改 帮助信息模板
            }
            submitAddQA(url,values).then((res)=>{
                that.confirmLoading = false;
                that.$message.info(res.data.msg)
                that.$emit('handleOk')
            })
            .catch((err)=>{
                that.confirmLoading = false;
            })
          }
          else{
              console.log(err)
          }
        });
    },
  },
  beforeCreate () {
    this.form = this.$form.createForm(this);
  },
  mounted(){
    this.$nextTick(()=>{
      this.$on('openDialog',function(){
        this.modalProps.isEdit = false
        this.modalProps.title = '添加问题模板'
        /*清空表单输入和校验*/
        this.form.resetFields()
        /*设置默认值*/
        this.baseInit.code.initialValue = ''
        this.baseInit.question.initialValue = '' 
      })
      this.$on('editDialog',function(data){
        this.modalProps.isEdit = true
        this.modalProps.title = '编辑问题模板'
        /*清空表单输入和校验*/
        this.form.resetFields()
        /*设置默认值*/
        this.baseInit.code.initialValue = data.code
        this.baseInit.question.initialValue = data.question  
      })
    })
  },
}
</script>

<!-- Add "scoped" attribute to limit CSS to this component only -->
<style scoped>

</style>
